<template>
	<div class="cascad-menu" ref="cascadMenu">
		<scroll class="left-menu" :data="menus" ref="leftMenu">
			<div class="left-menu-container">
				<ul>
					<li class="left-item" ref="leftItem" :class="{'current': currentIndex === index}" @click="selectLeft(index, $event)"
					 v-for="(menu, index) in menus" :key="index">
						<p class="text">{{menu.name}}</p>
					</li>
				</ul>
			</div>
		</scroll>
		<scroll class="right-menu" :data="menus" ref="rightMenu" @scroll="scrollHeight" :listenScroll="true" :probeType="3">
			<div class="right-menu-container">
				<ul>
					<li class="right-item" ref="rightItem" v-for="(menu, i) in menus" :key="i">
						<!-- <div class="title">{{menu.name}}</div> -->
						<ul>
							<li v-for="(item, j) in menu.data" :key="j" class="list" if="">
                                <span>
                                    <img :src="item.imgSrc" alt=""  class="img">
                                </span>
                              
                                <p class="tit" v-text="item.title"></p>
                                <p class="brief" v-text="item.brief"></p>
                                
                                
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</scroll>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	import Scroll from './scroll'
	export default {
		data() {
			return {
				rightTops: [],
				scrollY: 0,
				leftScrollY: 0
			}
		},
		props: {
			menus: {
				required: true,
				type: Array,
				default () {
					return []
				}
			}
		},
		computed: {
			currentIndex() {
				const {
					scrollY,
					rightTops
				} = this
				let index = rightTops.findIndex((height, index) => {
					return scrollY >= rightTops[index] && scrollY < rightTops[index + 1]
				})
				if (scrollY > rightTops[index] + 50) {
					index++;
				}
				return index
			}
		},
		created() {
			this.$nextTick(() => {
				this._calculateHeight()
			})
		},
		methods: {
			selectLeft(index, event) {
				console.log(index);
				if (!event._constructed) {
					return
				}
				let rightItem = this.$refs.rightItem
				let el = rightItem[index]
				this.$refs.rightMenu.scrollToElement(el, 300)
			},
			scrollHeight(pos) {
				console.log(pos);
				this.scrollY = Math.abs(Math.round(pos.y))
			},
			_calculateHeight() {
				let lis = this.$refs.rightItem;
				console.log(lis)
				let height = 0
				this.rightTops.push(height)
				Array.prototype.slice.call(lis).forEach(li => {
					height += li.clientHeight
					this.rightTops.push(height)
				})
				console.log(this.rightTops)
			}
		},
		components: {
			Scroll
		}
	}
</script>


<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";

	.cascadMenu {
		background: #fff;
	}

	.cascad-menu {
		display: flex;
		position: absolute;
		top: 49px;
		bottom: 0px;
		width: 100%;
		overflow: hidden;

		.left-menu {
			flex: 0 0 80px;
			width: 100%;
			background: #fff;
			border-right: 1px solid @border-color;

			.left-item {
				height: 54px;
				width: 100%;

				&.current {
					width: 100%;
					background: rgba(245, 245, 245, 1);
					color: @base-blue-color;
					font-weight: bold;
					position: relative;

					&:after {
						width: 2px;
						height: 15px;
						background: rgba(22, 176, 183, 1);
						border-radius: 2px;
						content: '';
						position: absolute;
						left: 0;
						top: 19px;
					}
				}

				.text {
					width: 100%;
					font-size: 15px;
					text-align: center;
					line-height: 54px;
				}
			}
		}

		.right-menu {
			background: #fff;
			flex: 1;
			padding-left: 12px;
			padding-right: 12px;

			.right-item {
				height: 100%;

				.title {
					border-bottom: 1px solid @border-color;
					height: 20px;
				}

				ul {
					padding-top: 20px;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					border-bottom: 1px solid @border-color;

					.list {
                        &:first-child{
                           width: 100% !important;
                           text-align: left;
                           position: relative;
                           div{
                            position: relative;
                            left:150px;
                            top:-89px;
                           }
                        }
						width: 120px;
						margin-bottom: 20px;
                        span{
                            width: 120px;
                            height: 80px;
                            border-radius: 5px;
                            display: inline-block;
                            .img{
                                width: 100%;
                                height: 100%;
                                border-radius: 5px;
                            }
                        }
                        p{
                            text-align: left;
                            &.tit{
                               font-size:15px;
                               font-weight: bold;
                              color:@base-black-color;
                              margin: 10px 0;

                            }
                            &.brief{
                               font-size:12px;
                               color:@base-color-gray;
                            }
                        }
                       
					}
				}


			}

		}
	}
</style>
